<template>
	<view class="view-page">
		<view class="logo"><image src="/static/logo.png" mode="widthFix"></image></view>
		<view class="sysName">Hi，欢迎使用{{sysName}}</view>
		<view class="group">
			<view class="row u-flex-y-center" :class="{ active: focus == 1 }">
				<i class="user"></i>
				<input type="text" class="u-flex-sub" @input="inputname" placeholder="请输入手机号" v-model.lazy="username" />
			</view>
			<view class="row u-flex-y-center" :class="{ active: focus == 2 }">
				<i class="pwd"></i>
				<input type="password" class="u-flex-sub" @input="inputpassword" placeholder="请输入密码" v-model.lazy="password" />
			</view>
			<view class="loginBtn">
				<u-button type="primary" :loading="loading" text="登录" shape="circle" @tap="login"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
import md5Libs from '@/utils/md5.js';
import { getAccountUserList } from '@/service/api.js';
export default {
	data() {
		return {
			focus: 0,
			username: '',
			password: '',
			isHasMdspwd: 0,
			loading: false,
			sysName:'康诺芯慢病智慧管家'
		};
	},
	onLoad() {
		let loginParam = uni.getStorageSync('loginParam');
		this.username = loginParam.username;
		this.password = loginParam.password;
	},
	computed: {
		...mapState(['hasGetMenu', 'accountList', 'curAccountId'])
	},
	methods: {
		...mapMutations(['$uStore']),
		...mapActions(['getUserInfo', 'getPreMenu']),
		inputname(e) {
			let { value = '' } = e.detail || {};
			this.username = value;
		},
		inputpassword(e) {
			let { value = '' } = e.detail || {};
			this.password = value;
		},
		login() {
			if (this.username && this.username.trim()) {
				this.loading = true;
				if (this.password && this.password.trim() && this.username && this.username.trim()) {
					var param = {
						username: this.username.trim(),
						md5Pass: md5Libs.md5(this.password.trim()),
						isWxLogin: 1
					};
					this.$postAction(this.$api.login, param)
						.then(da => {
							this.$uStore({
								name: 'isLogin',
								value: true
							});
							uni.setStorageSync('loginParam', {
								username: this.username.trim(),
								password: this.password.trim()
							});
							uni.setStorageSync('access_token', da.access_token);
							uni.setStorageSync('refresh_token', da.refresh_token);
							this.getUserInfo().then(async da => {
								this.$Router.replaceAll({
									path: '/pages/index/index'
								});
							});
						})
						.finally(() => {
							this.loading = false;
						});
				} else {
					uni.showToast({
						title: '请输入正确的用户名和密码',
						icon: 'none'
					});
					this.loading = false;
				}
			} else {
				uni.showToast({
					title: '请输入正确的用户名和密码',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.tip {
	color: #999;
	text-align: center;
	position: absolute;
	bottom: 20upx;
	left: 0;
	width: 100%;
}
.view-page {
	position: relative;
	height: 100%;

	.logo {
		padding-top: 250upx;
		width: 200upx;
		margin: 0 auto 60upx;
		image {
			display: block;
			width: 100%;
			height: 100upx;
		}
	}
	.sysName{
		padding-top: 30upx;
		margin: 0 auto 60upx;
		font-size: 40rpx;
		text-align: center;
	}

	.group {
		margin: 0 auto;
		width: 580upx;

		.row {
			border-radius: 100upx;
			height: 100upx;
			background: #fff;
			border: 1px solid #eee;
			padding: 0 40upx;

			&.row {
				margin-top: 20upx;
			}

			i {
				display: block;
				width: 60upx;
				height: 60upx;
				margin-right: 25upx;

				&.user {
					background: url(/static/menu1.png) no-repeat center center;
					background-size: contain;
				}

				&.pwd {
					background: url(/static/menu2.png) no-repeat center center;
					background-size: contain;
				}
			}

			input {
				background: none;
				border: none;
				line-height: 100upx;
				height: 100upx;
				font-size: 30upx;
			}

			.link {
				color: $u-primary;
				font-size: 26upx;
			}

			&.active {
				border-color: $u-primary;
			}
		}

		.loginBtn {
			margin: 50upx auto 0;
		}
	}
}
</style>
